import {
  View,
  Text,
  StyleSheet,
  Image,
  ImageBackground,
  Button,
  Pressable,
  TextInput,
  Alert,
} from 'react-native';
import React, {useState} from 'react';
import {adminLogin} from '../service';
// 导入服务器端的图片,该图片就会随着APP一起打包安装入手机中
// 使用commonJS语法导入
let logo1 = require('../img/logo.png');
// 使用ES6语法导入
// import logo2 from '../img/logo.png';
let bg = require('../img/bg.jpg');
let eyeOpen = require('../img/eye-open.png');
let eyeClose = require('../img/eye-close.png');

{
  /* ------------------------------------------------------------------------------------------------------------ */
}

/**
 * 所有的路由组件props中都有两个属性
 * route:保存着当前路由地址信息,类似于this.$route
 * navigation:保存着当前路由参数/页面跳转方法,类似于this.$router
 */

export default function AdminLogin({navigation, route}) {
  // console.log(props);
  // 状态变量:按钮的升高高度
  let [btnElevation, setBtnElevation] = useState(20);

  // 状态变量:是否隐藏密码输入
  let [hidePwd, setHidePwd] = useState(true);

  // 执行登录操作
  let doLogin = async () => {
    // console.log('开始执行登录操作', aname, apwd);
    // 1.客户端输入效验
    let n = aname.trim();
    if (!n) {
      Alert.alert('错误', '用户名不能为空', [
        {text: '确定', onPress: () => {}}, // 第一个按钮
        {text: '取消', onPress: () => {}}, // 第二个按钮
      ]);
    }

    let p = apwd.trim();
    if (!p) {
      Alert.alert('错误', '用户名不能为空', [
        {text: '确定', onPress: () => {}}, // 第一个按钮
        {text: '取消', onPress: () => {}}, // 第二个按钮
      ]);
    }
    // 2.提交给服务器端接口,进行异步验证
    let data = await adminLogin(n, p);
    console.log(data);
    // 3.验证执行结构,完成登录跳转或提示错误
    if (data.code === 200) {
      // 登录成功

      Alert.alert('成功', '欢迎回来:' + n, [
        {
          text: 'Yes!',
          onPress: () => {
            navigation.navigate('menu');
          },
        },
      ]);
      // 跳转到主菜单页面
      // navigation.navigate('menu');
    } else {
      // 登录失败
      Alert.alert('失败', '登录失败!错误原因为:' + data.msg, [{text: '确定'}]);
    }
  };

  //
  let [aname, setAname] = useState('admin');

  let [apwd, setApwd] = useState('123456');

  return (
    <ImageBackground source={bg}>
      {/* ----------------------------------------------------------- */}
      <View style={ss.screen}>
        {/* F1:用户名输入框 */}
        <View style={ss.inputGroup}>
          <TextInput
            value={aname}
            onChangeText={data => setAname(data)}
            style={ss.input}
            placeholder="请输入管理员用户名"></TextInput>
          <Image source={require('../img/user.png')} />
        </View>
        {/* ----------------------------------------------------------- */}

        {/* F2:密码输入框 */}
        <View style={ss.inputGroup}>
          {/* secureTextEntry:安全的文本输入(即密码输入) */}
          <TextInput
            value={apwd}
            onChangeText={data => setApwd(data)}
            secureTextEntry={hidePwd}
            style={ss.input}
            placeholder="请输入用户登录密码"></TextInput>
          <Pressable onPress={() => setHidePwd(!hidePwd)}>
            {/* 错误写法:一个require永远只能导入一张图片到手机App */}
            {/* <Image source={require(hidePwd ? '../img/eye-close.png':'../img/eye-open.png' )} /> */}
            <Image source={hidePwd ? eyeClose : eyeOpen} />
          </Pressable>
        </View>

        {/* ----------------------------------------------------------- */}

        {/* F3:登录按钮 */}
        {/* <Button title="登 录" style={{color: '#00f'}} color="#ff0" /> */}
        {/* <Text style={ss.btn}>登 录</Text> */}
        {/* onPressIn:按压事件 onPressOut:按压结束事件 */}
        <Pressable
          onPressIn={() => setBtnElevation(4)}
          onPressOut={() => setBtnElevation(8)}
          onPress={doLogin}>
          <Text style={[ss.btn, {elevation: btnElevation}]}>登录</Text>
        </Pressable>
        {/* ----------------------------------------------------------- */}

        {/* F4:Logo和标题 */}
        <View style={ss.f4}>
          <Image source={logo1} />
          <Text style={ss.title}>后台管理系统</Text>
        </View>

        {/* ----------------------------------------------------------- */}

        {/* F5:版权声明 */}
        <Text style={ss.copyright}>版权所有 &copy; IKUN科技</Text>
      </View>
    </ImageBackground>
  );
}

{
  /* ------------------------------------------------------------------------------------------------------------ */
}

// 在模块内部声明 内部样式
let ss = StyleSheet.create({
  screen: {
    // padding:30 50,  此写法错误
    paddingHorizontal: 50, // 水平内边距 :  left+right
    paddingVertical: 80, //  竖直内边距: top + bottom
    height: '100%',
  },
  copyright: {
    textAlign: 'center',
    marginVertical: 64,
  },
  f4: {
    // 把弹性容器主轴方向有默认的纵向改为横向
    flexDirection: 'row',
    // 弹性容器的子元素在主轴方向上对齐方式:空白方式
    justifyContent: 'space-between',
    marginTop: 42,
    // 弹性容器中的子元素在交叉轴上(纵轴)对齐方式:居中对齐
    alignItems: 'center',
  },
  title: {
    fontSize: 28,
  },
  btn: {
    backgroundColor: '#0aa1ed',
    textAlign: 'center',
    color: '#fff',
    paddingVertical: 8, //数值方向上的内边距
    borderRadius: 5,
    // 边框外的阴影
    // shadowColor:'#aaa',  只有iOS支持
    elevation: 8, //升高/高地 只有android支持
    marginTop: 28,
  },
  inputGroup: {
    // 修改弹性容器的主轴方向:横向
    flexDirection: 'row',
    // 弹性容器的子元素在交叉轴上:居中对齐
    alignItems: 'center',
    // 下边宽的宽度
    borderBottomWidth: 1,
    // 下边框的颜色
    borderBottomColor: '#616161',
  },
  input: {
    // 弹性子元素的尺寸增长权重:1
    flex: 1,
  },
});
